<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view>
            <view>{{ number + 1}}</view>
            <view>{{ ok ? 'YES' : 'NO' }}</view>
            <view>{{ message.split('').reverse().join('')}}</view>
        </view>
        
        <view v-for="item in arr" style="color: #ff0000;">
            {{item}}
        </view>
        
        <view v-for="(item,index) in 6" style="color: #00ff00;">
            <view :class="'list-'+ index%2">{{index +2}}</view>
        </view>
        
        <view v-for="(value,name,index) in object">
            {{index}}.{{name}}.{{value}}
        </view>
        
        <view v-for="item in arr" :key="item.id">
            <view style="color: #333300;">{{item.id}}:{{item.name}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                number: 1,
                ok: true,
                message: 'Hello Vue',
                arr: [
                    {id: 1,guxiaoyun: 'uni-app'},
                    {id: 2,guxiaoyun: 'wechat'},
                    {id: 3,guxiaoyun: 'taobao'},
                    {id: 4,guxiaoyun: 'Jingdong'}],
                    
                    object: {
                        title: 'how to do lists in Vue',
                        author: 'guxiaoyun',
                        publishedAt: '2025-09-30'
                    }
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
	.list-0{
		color:aqua;
		font-size: 35rpx;
	}
	
	.list-1{
		color: brown;
		font-size: 20rpx;
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.logo{
		height: 200rpx;
		width: 200rpx;
	}
</style>
